<template>
	<div id="Form">
		<el-form label-width="120px">
			<el-row>
				<el-col :offset="0" :span="24">
					<el-form-item label="每日抽奖机会:" :required="true">
						<span style="font-size: 12px">每人每日最多有</span>
						<el-input style="width: 50px" v-model="form.name"> </el-input>
						<span style="font-size: 12px">次抽奖机会</span>
					</el-form-item>
				</el-col>
			</el-row>
			<p>中奖率</p>
			<hr style="border: none; border-bottom: 2px solid rgba(0, 0, 0, 0.1); margin: 10px 0 10px" />
			<el-row>
				<el-col :offset="0" :span="24">
					<el-form-item label="每人中奖次数:">
						<span style="font-size: 12px">每人最多可中奖</span>
						<el-input style="width: 50px" v-model="form.name"> </el-input>
						<span style="font-size: 12px">次</span>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="24">
					<el-form-item label="每日中奖次数:">
						<el-radio v-model="form.radio2" label="1">不限</el-radio>
						<el-radio v-model="form.radio2" label="2">限制</el-radio>
						<div v-if="form.radio2 == 2" style="display: inline-block">
							<el-input style="width: 50px" v-model="form.name"> </el-input>
							<span style="font-size: 12px; margin-left: 5px">次</span>
						</div>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="24" style="position: relative">
					<el-form-item :label="'抽奖模式:'" :style="{ 'margin-bottom': form.radio4 == 2 ? '100px' : '18px' }">
						<el-radio v-model="form.radio4" label="1">按人流量发放</el-radio>
						<el-radio v-model="form.radio4" label="2">时间均匀发放</el-radio>
						<span v-if="form.radio4 == 2" class="lottery-mode">
							后台系统需自动奖所有奖品 <br />
							均匀地分配到活动时间上，<br />
							让每个奖品对应一个抽奖时间
						</span>
						<div v-if="form.radio4 == 2" style="position: absolute; top: 50px; left: -40px">
							<p>均匀时间选择</p>
							<el-date-picker
								style="width: 350px"
								v-model="form.value1"
								type="datetimerange"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								:default-time="['00:00:00']"
							>
							</el-date-picker>
						</div>

						<span style="position: absolute; bottom: -15px; left: -90px; color: red; font-size: 12px">(发布后不可切换)</span>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row v-if="form.radio4 == 1">
				<el-col :offset="0" :span="24">
					<el-form-item label="总中奖率:">
						<el-input style="width: 50px" v-model="form.name"> </el-input>
						<span style="font-size: 12px; margin-left: 5px">%</span>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="24">
					<el-form-item label="奖品分期投放:">
						<el-radio v-model="form.radio5" label="1">关闭</el-radio>
						<el-radio v-model="form.radio5" label="2">12小时</el-radio>
						<el-radio v-model="form.radio5" label="3">24小时</el-radio>
						<el-radio v-model="form.radio5" label="4">48小时</el-radio>
						<el-input style="width: 50px" v-model="form.radio5"> </el-input>
						<span style="font-size: 12px; margin-left: 5px">小时</span>
					</el-form-item>
				</el-col>
			</el-row>
			<div>
				<div style="margin-bottom: 18px">
					<div>
						<span>抽奖限制(针对某一奖项)</span>
						<!-- <div style="display: inline-block">
								<span
									style="
										font-size: 18px;
										display: inline-block;
										width: 20px;
										height: 20px;
										line-height: 20px;
										border-radius: 5px;
										text-align: center;
										cursor: pointer;
										background: #409eff;
										color: #fff;
									"
									@click="handleDecrease"
									>-</span
								>
								<span
									style="
										font-size: 18px;
										display: inline-block;
										width: 20px;
										height: 20px;
										line-height: 20px;
										border-radius: 5px;
										text-align: center;
										cursor: pointer;
										background: #409eff;
										color: #fff;
										margin-left: 10px;
									"
									@click="handleIncrease"
									>+</span
								>
							</div> -->
					</div>
					<hr style="border: none; border-bottom: 2px solid rgba(0, 0, 0, 0.1); margin: 10px 0 10px" />
					<div style="border: 1px solid rgba(0, 0, 0, 0.1)">
						<el-row :gutter="10">
							<el-col :offset="0" :span="5">
								<el-form-item label="选择奖项:">
									<el-select style="width: 100px" v-model="form.address" placeholder="奖项" class="">
										<el-option key="1" label="广东省" value="广东省"></el-option>
										<el-option key="2" label="湖南省" value="湖南省"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :offset="0" :span="19">
								<el-form-item label="关联奖品数量:">
									<el-input style="width: 50px" v-model="form.name" placeholder="" class=""></el-input>
									<span style="font-size: 12px; margin-left: 5px">个</span>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :offset="0" :span="12">
								<el-form-item label="定时投放:" :required="true">
									<el-radio v-model="form.radio2" label="1">具体时间段</el-radio>
									<el-radio v-model="form.radio2" label="2">具体某一特定时间</el-radio>
									<el-date-picker
										v-if="form.radio2 == 1"
										style="width: 100%"
										v-model="form.value1"
										type="datetimerange"
										start-placeholder="开始日期"
										end-placeholder="结束日期"
										:default-time="['00:00:00']"
									>
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :offset="0" :span="12">
								<el-form-item label="某一项中奖率:">
									<el-input style="width: 80px" v-model="form.name" placeholder="" class=""></el-input>
									<span style="font-size: 12px; margin-left: 5px">%</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :offset="0" :span="12">
								<el-form-item label="奖品分期投放:">
									<el-checkbox v-model="form.checked">12小时</el-checkbox>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :offset="1" :span="12">
								<el-form-item label="">
									<el-button @click="handleResetForm">重置</el-button>
									<el-button @click="handleSubmit" type="primary">保存</el-button>
								</el-form-item>
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
			<!-- <el-row>
				<el-col :offset="0" :span="12">
					<el-form-item label="">
						<el-button @click="handleResetForm">重置</el-button>
						<el-button @click="handleSubmit" type="primary">保存</el-button>
					</el-form-item>
				</el-col>
			</el-row> -->
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {}
			};
		},
		methods: {
			handleResetForm() {
				this.form = {};
			},
			handleSubmit() {
				console.log(this.form);
			}
		}
	};
</script>
<style lang='scss'>
	#Form {
		// ======================================================================
		margin-bottom: 18px;
		.lottery-mode {
			position: absolute;
			top: -40px;
			left: 240px;
			background: #7df96d;
			wdith: auto;
			font-size: 12px;
			line-height: 20px;
			color: #333;
			padding: 5px;
			box-sizing: border-box;
			border-radius: 10px;
			&::after {
				content: '';
				position: absolute;
				left: -16px;
				width: 0px;
				height: 0px;
				border: transparent solid;
			}

			&::after {
				border-width: 8px;
				border-right-color: #7df96d;
				top: 45px;
			}
		}
		.el-row:last-of-type {
			.el-form-item__content {
				margin-left: 0px !important;
			}
		}

		.el-radio {
			margin-right: 10px;
		}
		.el-form-item__label {
			color: #000;
		}
		.el-input--small {
			margin: 0 5px 0;
			.el-input__inner {
				height: 25px;
				line-height: 25px;
				padding: 0 5px;
			}
		}
	}
</style>